import { ViewChild,Component } from '@angular/core';
import { CTAFComponent,ComponentBase } from '@ctaf/framework';
import { AmChartsComponent} from '@ctaf/components';

import * as _ from 'underscore';



@CTAFComponent({
    selector: 'qdm-currencySwap',
    templateUrl: 'currencySwap.component.html'
})

export class CurrencySwapComponent extends ComponentBase{
    @ViewChild('amChart') amChart: AmChartsComponent;
    @ViewChild('amChart2') amChart2: AmChartsComponent;

    public _chartData: any;
    public get chartData() {
        this._chartData = [];
        let firstDate = new Date();
        firstDate.setDate(firstDate.getDate() - 100);

        for (let i = 0; i < 100; i++) {
            // we create date objects here. In your data, you can have date strings
            // and then set format of your dates using chart.dataDateFormat property,
            // however when possible, use date objects, as this will speed up chart rendering.
            let newDate = new Date(firstDate);
            newDate.setDate(newDate.getDate() + i);

            let visits = Math.round(Math.sin(i * 5) * i);
            let hits = Math.round(Math.random() * 80) + 500 + i * 3;
            let views = Math.round(Math.random() * 6000) + i * 4;

            this._chartData.push({
                date: newDate,
                visits: visits,
                hits: hits,
                views: views
            });
        }
        return this._chartData;
    }

    ngOnInit() {
        this.amChart.options = {
            'type': 'serial',
            'pathToImages': '/node_modules/@ctaf/components/images/amcharts/',  
            'theme': 'dark',
            'marginRight': 40,
            'marginLeft': 40,
            'autoMarginOffset': 20,
            'dataDateFormat': 'YYYY-MM-DD',
            'valueAxes': [ {
                'id': 'v1',
                'axisAlpha': 0,
                'position': 'left',
                'ignoreAxisWidth': true
            }],
            'balloon': {
                'borderThickness': 1,
                'shadowAlpha': 0
            },
            'graphs': [ {
                'id': 'g1',
                'balloon': {
                    'drop': true,
                    'adjustBorderColor': false,
                    'color': '#ffffff'
                },
                'bullet': 'round',
                'bulletBorderAlpha': 1,
                'bulletColor': 'red',
                'bulletSize': 5,
                'hideBulletsCount': 50,
                'lineThickness': 2,
                'title': 'red line',
                'useLineColorForBulletBorder': true,
                'valueField': 'value',
                'balloonText': '<span style=\'font-size:16px;\'>[[value]]</span>'
            }],
            'chartCursor': {
                'pan': true,
                'valueLineEnabled': true,
                'valueLineBalloonEnabled': true,
                'cursorAlpha': 1,
                'cursorColor': '#FFC125',//游标颜色
                'limitToGraph': 'g1',
                'valueLineAlpha': 0.2
            },
            'categoryField': 'date',
            'categoryAxis': {//分类轴
                'parseDates': true,//解析日期，选false时将原样显示下面的date
                'dashLength': 0,//破折号长度，默认为0是实心线
                'minorGridEnabled': false//启用背景网格
            },
            'dataProvider': [{
                'date': '2017-09-01',
                'value': 42
            }, {
                'date': '2017-09-02',
                'value': 35
            }, {
                'date': '2017-09-03',
                'value': 31
            }, {
                'date': '2017-09-04',
                'value': 47
            }, {
                'date': '2017-09-05',
                'value': 52
            }, {
                'date': '2017-09-06',
                'value': 46
            }, {
                'date': '2017-09-07',
                'value': 41
            }, {
                'date': '2017-09-08',
                'value': 43
            }, {
                'date': '2017-09-09',
                'value': 40
            }, {
                'date': '2017-09-10',
                'value': 39
            }, {
                'date': '2017-09-11',
                'value': 34
            }, {
                'date': '2017-09-12',
                'value': 29
            }, {
                'date': '2017-09-13',
                'value': 34
            }, {
                'date': '2017-09-14',
                'value': 37
            }, {
                'date': '2017-09-15',
                'value': 42
            }, {
                'date': '2017-09-16',
                'value': 49
            }, {
                'date': '2017-09-17',
                'value': 46
            }, {
                'date': '2017-09-18',
                'value': 47
            }, {
                'date': '2017-09-19',
                'value': 55
            }, {
                'date': '2017-09-20',
                'value': 59
            }, {
                'date': '2017-09-21',
                'value': 58
            }, {
                'date': '2017-09-22',
                'value': 57
            }, {
                'date': '2017-09-23',
                'value': 61
            }, {
                'date': '2017-09-24',
                'value': 59
            }, {
                'date': '2017-09-25',
                'value': 67
            }, {
                'date': '2017-09-26',
                'value': 65
            }, {
                'date': '2017-09-27',
                'value': 61
            }, {
                'date': '2017-09-28',
                'value': 66
            }, {
                'date': '2017-09-29',
                'value': 69
            }, {
                'date': '2017-09-30',
                'value': 71
            }, {
                'date': '2017-10-01',
                'value': 67
            }, {
                'date': '2017-10-02',
                'value': 63
            }, {
                'date': '2017-10-03',
                'value': 46
            }, {
                'date': '2017-10-04',
                'value': 32
            }, {
                'date': '2017-10-05',
                'value': 21
            }, {
                'date': '2017-10-06',
                'value': 18
            }, {
                'date': '2017-10-07',
                'value': 21
            }, {
                'date': '2017-10-08',
                'value': 28
            }, {
                'date': '2017-10-09',
                'value': 27
            }, {
                'date': '2017-10-10',
                'value': 36
            }, {
                'date': '2017-10-11',
                'value': 33
            }, {
                'date': '2017-10-12',
                'value': 31
            }, {
                'date': '2017-10-13',
                'value': 30
            }, {
                'date': '2017-10-14',
                'value': 34
            }, {
                'date': '2017-10-15',
                'value': 38
            }, {
                'date': '2017-10-16',
                'value': 37
            }, {
                'date': '2017-10-17',
                'value': 44
            }, {
                'date': '2017-10-18',
                'value': 49
            }, {
                'date': '2017-10-19',
                'value': 53
            }, {
                'date': '2017-10-20',
                'value': 57
            }, {
                'date': '2017-10-21',
                'value': 60
            }, {
                'date': '2017-10-22',
                'value': 61
            }, {
                'date': '2017-10-23',
                'value': 69
            }, {
                'date': '2017-10-24',
                'value': 67
            }, {
                'date': '2017-10-25',
                'value': 72
            }, {
                'date': '2017-10-26',
                'value': 77
            }, {
                'date': '2017-10-27',
                'value': 75
            }, {
                'date': '2017-10-28',
                'value': 70
            }, {
                'date': '2017-10-29',
                'value': 72
            }, {
                'date': '2017-10-30',
                'value': 70
            }, {
                'date': '2017-10-31',
                'value': 72
            }, {
                'date': '2017-11-01',
                'value': 73
            }, {
                'date': '2017-11-02',
                'value': 67
            }, {
                'date': '2017-11-03',
                'value': 68
            }, {
                'date': '2017-11-04',
                'value': 65
            }, {
                'date': '2017-11-05',
                'value': 71
            }, {
                'date': '2017-11-06',
                'value': 75
            }, {
                'date': '2017-11-07',
                'value': 74
            }, {
                'date': '2017-11-08',
                'value': 71
            }, {
                'date': '2017-11-09',
                'value': 76
            }, {
                'date': '2017-11-10',
                'value': 77
            }, {
                'date': '2017-11-11',
                'value': 81
            }, {
                'date': '2017-11-12',
                'value': 83
            }, {
                'date': '2017-11-13',
                'value': 80
            }, {
                'date': '2017-11-14',
                'value': 81
            }, {
                'date': '2017-11-15',
                'value': 87
            }, {
                'date': '2017-11-16',
                'value': 82
            }, {
                'date': '2017-11-17',
                'value': 86
            }, {
                'date': '2017-11-18',
                'value': 80
            }, {
                'date': '2017-11-19',
                'value': 87
            }, {
                'date': '2017-11-20',
                'value': 83
            }, {
                'date': '2017-11-21',
                'value': 85
            }, {
                'date': '2017-11-22',
                'value': 84
            }, {
                'date': '2017-11-23',
                'value': 82
            }, {
                'date': '2017-11-24',
                'value': 73
            }, {
                'date': '2017-11-25',
                'value': 71
            }, {
                'date': '2017-11-26',
                'value': 75
            }, {
                'date': '2017-11-27',
                'value': 79
            }, {
                'date': '2017-11-28',
                'value': 70
            }, {
                'date': '2017-11-29',
                'value': 73
            }, {
                'date': '2017-11-30',
                'value': 61
            }, {
                'date': '2017-12-01',
                'value': 62
            }, {
                'date': '2017-12-02',
                'value': 66
            }, {
                'date': '2017-12-03',
                'value': 65
            }, {
                'date': '2017-12-04',
                'value': 73
            }, {
                'date': '2017-12-05',
                'value': 79
            }, {
                'date': '2017-12-06',
                'value': 78
            }, {
                'date': '2017-12-07',
                'value': 78
            }, {
                'date': '2017-12-08',
                'value': 78
            }, {
                'date': '2017-12-09',
                'value': 74
            }, {
                'date': '2017-12-10',
                'value': 73
            }, {
                'date': '2017-12-11',
                'value': 75
            }, {
                'date': '2017-12-12',
                'value': 70
            }, {
                'date': '2017-12-13',
                'value': 77
            }, {
                'date': '2017-12-14',
                'value': 67
            }, {
                'date': '2017-12-15',
                'value': 62
            }, {
                'date': '2017-12-16',
                'value': 64
            }, {
                'date': '2017-12-17',
                'value': 61
            }, {
                'date': '2017-12-18',
                'value': 59
            }, {
                'date': '2017-12-19',
                'value': 53
            }, {
                'date': '2017-12-20',
                'value': 54
            }, {
                'date': '2017-12-21',
                'value': 56
            }, {
                'date': '2017-12-22',
                'value': 59
            }, {
                'date': '2017-12-23',
                'value': 58
            }, {
                'date': '2017-12-24',
                'value': 55
            }, {
                'date': '2017-12-25',
                'value': 52
            }, {
                'date': '2017-12-26',
                'value': 54
            }, {
                'date': '2017-12-27',
                'value': 50
            }, {
                'date': '2017-12-28',
                'value': 50
            }, {
                'date': '2017-12-29',
                'value': 51
            }, {
                'date': '2017-12-30',
                'value': 52
            }, {
                'date': '2017-12-31',
                'value': 58
            }]
        };
        this.amChart2.options = {
            'type': 'serial',
            'pathToImages': '/node_modules/@ctaf/components/images/amcharts/',
            'theme': 'dark',
            'legend': {
                'useGraphSettings': true
            },
            'dataProvider': this.chartData,
            'synchronizeGrid': true,
            'valueAxes': [{
                'id': 'v1',
                'axisColor': '#006600',
                'axisThickness': 2,
                'axisAlpha': 1,
                'position': 'left'
            }, {
                'id': 'v2',
                'axisColor': '#03D202',
                'axisThickness': 2,
                'offset': 50,
                'axisAlpha': 1,
                'position': 'left'
            }, {
                'id': 'v3',
                'axisColor': '#2fDE09',
                'axisThickness': 2,
                'gridAlpha': 0,
                'offset': 100,
                'axisAlpha': 1,
                'position': 'left'
            }],
            'graphs': [{
                'valueAxis': 'v1',
                'lineColor': '#FF6600',
                'bullet': 'round',
                'bulletBorderThickness': 1,
                'hideBulletsCount': 30,
                'title': 'red line',
                'valueField': 'visits',
                'fillAlphas': 0
            }, {
                'valueAxis': 'v2',
                'lineColor': '#FCD202',
                'bullet': 'square',
                'bulletBorderThickness': 1,
                'hideBulletsCount': 30,
                'title': 'yellow line',
                'valueField': 'hits',
                'fillAlphas': 0
            }, {
                'valueAxis': 'v3',
                'lineColor': '#B0DE09',
                'bullet': 'triangleUp',
                'bulletBorderThickness': 1,
                'hideBulletsCount': 30,
                'title': 'green line',
                'valueField': 'views',
                'fillAlphas': 0
            }],
            'chartScrollbar': {},
            'chartCursor': {
                'cursorPosition': 'mouse'
            },
            'categoryField': 'date',
            'categoryAxis': {
                'parseDates': true,
                'axisColor': '#DADADA',
                'minorGridEnabled': true
            }
        };
     }
}